<template>
  <div class="home">
    <!-- 顶部栏 -->
    <van-nav-bar fixed placeholder>
      <template #left>
        <div class="logo"></div>
      </template>
      <template #right>
        <van-button
          round
          color="#3dacfa"
          icon="search"
          @click="$router.push({ path: '/search' })"
          >搜索</van-button
        >
      </template>
    </van-nav-bar>
    <!-- tab栏 -->
    <van-tabs v-model="active" @click="tabClick">
      <van-tab v-for="item in channels" :key="item.id" :title="item.name">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <van-cell
              v-for="item in list"
              :key="item.art_id"
              :title="item.title"
              @click="
                $router.push({ path: '/article', query: { id: item.art_id } })
              "
            >
              <template #label>
                <div>
                  <van-grid :column-num="item.cover.type">
                    <van-grid-item
                      v-for="(value, index) in item.cover.images"
                      :key="index"
                      lazy-load
                    >
                      <van-image :src="value" />
                    </van-grid-item>
                  </van-grid>
                  <div>
                    <span>作者:{{ item.aut_name }}</span
                    >&nbsp; <span>{{ item.comm_count }}评论</span>&nbsp;
                    <span>{{ item.pubdate | fromNow }}</span>
                  </div>
                </div>
              </template>
            </van-cell>
          </van-list>
        </van-pull-refresh>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getChannels } from './home.js'
import { getArticles } from './home.js'
import moment from 'moment'
//设置语言
moment.locale('zh-cn')
export default {
  name: 'home',
  data () {
    return {
      active: 0,
      channels: [],
      list: [],
      loading: false, //加载状态  触底后自动变成true，此时执行onload逻辑
      finished: false, //是否加载完毕  false:继续加载  true:触底之后就不会加载了
      refreshing: false, //下拉刷新 用户下拉后这个值自动为true
      timestamp: null //默认不给值，发请求的时候获取当前时间戳就可以了
    }
  },
  async created () {
    let res = await getChannels()
    // console.log(res)
    this.channels = res.data.data.channels
  },
  methods: {
    /* 上拉加载更多 */
    async onLoad () {
      //1.判断有没有timestamp
      if (!this.timestamp) {
        //默认获取当前时间戳表示请求第一页
        this.timestamp = Date.now()
      }
      //2.发送请求
      let res = await getArticles({
        channel_id: this.channels[this.active].id,
        timestamp: this.timestamp
      })
      // console.log(res)

      //存储服务器返回的时间戳用于请求下一页数据
      this.timestamp = res.data.data.pre_timestamp
      //添加数据
      this.list.push(...res.data.data.results)
      // console.log(res)

      //2.修改loading为false:本次加载结束
      this.loading = false

      //3.如果超过100条数据，这个时候就不再触底
      if (this.list.length >= 100) {
        this.finished = true
      }
    },
    // 下拉刷新
    onRefresh () {
      //0.一旦下拉刷新，无条件的设置finished为false(保证刷新之后可以正常上拉加载更多)
      this.finished = false
      this.timestamp = null //下拉刷新时间戳清空，从头开始加载
      //1.先清空旧数据
      this.list = []
      //2.设置上拉加载更多状态为true(开启底部加载中动画)
      this.loading = true
      //3.重新请求数据
      this.onLoad()
      //4.关闭上拉刷新动画（如果不写，上面的上拉刷新动画会一直转圈）
      this.refreshing = false
    },
    // tab栏切换
    tabClick () {
      // 清空列表
      this.list = []
      this.timestamp = null
      // 设置loading状态
      this.loading = true
      this.onLoad()
    }
  },
  filters: {
    fromNow (value) {
      return moment(value).fromNow()
    }
  }
}
</script>

<style lang="less">
.home {
  // 顶部栏
  .van-nav-bar__content {
    display: flex;
    // height: 100vh;
    background-color: #3397f9;
    // box-sizing: border-box;
    .van-button {
      height: 30px;
      width: 100px;
      .van-icon {
        color: white;
      }
    }
    .van-nav-bar__left {
      .logo {
        width: 100px;
        height: 30px;
        background: url('~@/assets/logo.png') no-repeat;
        background-size: 100% 100%;
      }
    }
  }
  // tab栏
  .van-tabs {
    /* 2.1 头部tab栏 */
    .van-tabs__wrap {
      position: fixed;
      width: 100%;
      top: 46px;
      z-index: 10;
    }

    /* 2.2 内容 */
    .van-tabs__content {
      /* 设置列表栏的上margin,避免被导航栏与tab栏遮挡(固定定位导致脱标) */
      margin-top: 40px;
      /* 设置列表栏的下margin,避免被底部栏脱标导致遮挡 */
      // margin-bottom: 50px;
    }
  }
}
</style>
